0267. tsc --init 初始化配置
1. 🎯 本节内容
- --init 参数作用
- 生成的配置内容
- 自定义配置方法
2. 🫧 评价
tsc --init 快速生成标准的 tsconfig.json 配置文件，是项目初始化的便捷工具。
- 快速生成配置文件
- 包含详细注释说明
- 提供常用选项
- 新项目必备命令
- 学习配置的好材料
3. 🤔 --init 的作用？
tsc --init 在当前目录生成 tsconfig.json 配置文件。
3.1. 基本用法
bash
# 在当前目录生成 tsconfig.json
$ tsc --init
Created a new tsconfig.json with:
target: ES2016
module: commonjs
strict: true
esModuleInterop: true
skipLibCheck: true
forceConsistentCasingInFileNames: true
You can learn more at https://aka.ms/tsconfig1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
3.2. 生成的文件
json
// tsconfig.json（简化版）
{
"compilerOptions": {
"target": "ES2016",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}
}1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
4. 🤔 生成的配置内容？
4.1. 完整生成文件
json
// tsconfig.json（实际生成的文件）
{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig to read more about this file */
/* Projects */
// "incremental": true,
// "composite": true,
// "tsBuildInfoFile": "./.tsbuildinfo",
// "disableSourceOfProjectReferenceRedirect": true,
// "disableSolutionSearching": true,
// "disableReferencedProjectLoad": true,
/* Language and Environment */
"target": "ES2016",
// "lib": [],
// "jsx": "preserve",
// "experimentalDecorators": true,
// "emitDecoratorMetadata": true,
// "jsxFactory": "",
// "jsxFragmentFactory": "",
// "jsxImportSource": "",
// "reactNamespace": "",
// "noLib": false,
// "useDefineForClassFields": true,
// "moduleDetection": "auto",
/* Modules */
"module": "commonjs",
// "rootDir": "./",
// "moduleResolution": "node10",
// "baseUrl": "./",
// "paths": {},
// "rootDirs": [],
// "typeRoots": [],
// "types": [],
// "allowUmdGlobalAccess": true,
// "moduleSuffixes": [],
// "allowImportingTsExtensions": true,
// "resolvePackageJsonExports": true,
// "resolvePackageJsonImports": true,
// "customConditions": [],
// "resolveJsonModule": true,
// "allowArbitraryExtensions": true,
// "noResolve": true,
/* JavaScript Support */
// "allowJs": true,
// "checkJs": true,
// "maxNodeModuleJsDepth": 1,
/* Emit */
// "declaration": true,
// "declarationMap": true,
// "emitDeclarationOnly": true,
// "sourceMap": true,
// "inlineSourceMap": true,
// "outFile": "./",
// "outDir": "./",
// "removeComments": true,
// "noEmit": true,
// "importHelpers": true,
// "importsNotUsedAsValues": "remove",
// "downlevelIteration": true,
// "sourceRoot": "",
// "mapRoot": "",
// "inlineSources": true,
// "emitBOM": true,
// "newLine": "crlf",
// "stripInternal": true,
// "noEmitHelpers": true,
// "noEmitOnError": true,
// "preserveConstEnums": true,
// "declarationDir": "./",
// "preserveValueImports": true,
/* Interop Constraints */
// "isolatedModules": true,
// "verbatimModuleSyntax": true,
// "allowSyntheticDefaultImports": true,
"esModuleInterop": true,
// "preserveSymlinks": true,
"forceConsistentCasingInFileNames": true,
/* Type Checking */
"strict": true,
// "noImplicitAny": true,
// "strictNullChecks": true,
// "strictFunctionTypes": true,
// "strictBindCallApply": true,
// "strictPropertyInitialization": true,
// "noImplicitThis": true,
// "useUnknownInCatchVariables": true,
// "alwaysStrict": true,
// "noUnusedLocals": true,
// "noUnusedParameters": true,
// "exactOptionalPropertyTypes": true,
// "noImplicitReturns": true,
// "noFallthroughCasesInSwitch": true,
// "noUncheckedIndexedAccess": true,
// "noImplicitOverride": true,
// "noPropertyAccessFromIndexSignature": true,
// "allowUnusedLabels": true,
// "allowUnreachableCode": true,
/* Completeness */
// "skipDefaultLibCheck": true,
"skipLibCheck": true
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
4.2. 主要配置项
text
默认启用的选项：
✅ target: ES2016
✅ module: commonjs
✅ strict: true
✅ esModuleInterop: true
✅ skipLibCheck: true
✅ forceConsistentCasingInFileNames: true
其他选项：
⚠️ 全部被注释（需要手动启用）
📝 包含详细的说明注释
🔗 包含官方文档链接1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
5. 🤔 如何自定义配置？
5.1. 根据项目类型修改
Node.js 项目
json
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"lib": ["ES2020"],
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"sourceMap": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
浏览器项目
json
{
"compilerOptions": {
"target": "ES2020",
"module": "esnext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"jsx": "react-jsx",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"moduleResolution": "bundler",
"esModuleInterop": true,
"skipLibCheck": true,
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
},
"include": ["src"]
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
库项目
json
{
"compilerOptions": {
"target": "ES2015",
"module": "esnext",
"lib": ["ES2015"],
"declaration": true,
"declarationMap": true,
"sourceMap": true,
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist", "**/*.test.ts"]
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
5.2. 使用预设配置
bash
# 安装预设
npm install --save-dev @tsconfig/node16
# 或其他预设
npm install --save-dev @tsconfig/react-native
npm install --save-dev @tsconfig/recommended1
2
3
4
5
6
2
3
4
5
6
json
// 使用预设
{
"extends": "@tsconfig/node16/tsconfig.json",
"compilerOptions": {
"outDir": "./dist"
}
}1
2
3
4
5
6
7
2
3
4
5
6
7
5.3. 渐进式严格配置
json
// 第一阶段：基础配置
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"strict": false,
"allowJs": true,
"outDir": "./dist"
}
}
// 第二阶段：启用部分严格检查
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"noImplicitAny": true,
"strictNullChecks": true,
"outDir": "./dist"
}
}
// 第三阶段：完全严格
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"outDir": "./dist"
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
5.4. 实际工作流
bash
# 1. 初始化项目
mkdir my-project && cd my-project
npm init -y
# 2. 安装 TypeScript
npm install --save-dev typescript
# 3. 生成配置文件
npx tsc --init
# 4. 根据项目类型修改配置
# 编辑 tsconfig.json
# 5. 创建源码目录
mkdir src
echo "console.log('Hello, TypeScript!');" > src/index.ts
# 6. 编译
npx tsc
# 7. 运行
node dist/index.js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22